<template>
  <div class="card-container">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="role" tab="角色管理">
        <role-management />
      </a-tab-pane>
      <a-tab-pane key="user" tab="人员绑定">
        <user-bind :current-tab="activeKey" />
      </a-tab-pane>
      <template #rightExtra>
        <div id="rights-management-toolbar-right"></div>
      </template>
    </a-tabs>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import RoleManagement from './role-management/role-management.vue'
import UserBind from './user-bind/user-bind.vue'
const activeKey = ref('role')
</script>
<style scoped lang="less">
.card-container {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  padding: 0px 22px 21px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.card-container > .ant-tabs {
  height: 100%; /* 确保 ant-tabs 有明确高度 */
}
.card-container :deep(.ant-tabs-tab) {
  padding: 14px 0;
}

/* 使用深度选择器 */
.card-container :deep(.ant-tabs-content) {
  height: 100%;
}
</style>
